color可以調整內容的顏色，要調背景色則是用background-color，邊框色border-color，這裡介紹顏色的使用方式，
首先是這種直接指定color的顏色名子，想要天空藍就選skyblue，紫羅蘭色就選violet

        div{
            background-color:cyan;
            width: 40vw;
            height: 20vh;
            text-align: center;
            line-height: 20vh;
        }
        .div1{background-color: violet;}
        .div2{background-color: chartreuse;}

color也可以使用十六進制來條，在數值前加上#來用，總共六位數，這六位數其實就是條RGB的數值，前兩個是條紅色，中間兩個是條綠色，後兩個是條藍色，ff=16*15+15=255是rgb的最大值

div{color: #ff00a6;}
.div1{color:#bbffbb;}
.div2{color:#c1d2FF;}

再來是用rgb條數值，透過給color:rgb(紅色,綠色,藍色)裡不同數字來改變顏色

div{background-color:rgb(0,154,255);color: #ff00a6;}
.div1{background-color: rgb(200,0,150);color:#bbffbb}
.div2{background-color: rgb(0, 255, 0);color:#c1d2FF}

除了rgb外還有rgba，a表示透明度，數字越低透明度越高，它的值在0到1之間，0表示完全透明，1則是完全不透明，可以用0.多，或是%來使用，0.05表示透明度5%，10%也可以看成0.1，0.7則是70%

div{background-color:rgba(0,154,255,0.05);color: #ff00a6;}
.div1{background-color:rgba(200,0,150,10%);color:#bbffbb}
.div2{background-color: rgba(0, 255, 0,0.7);color:#c1d2FF}

opacity:透明度，這個東西可以條整個物件的透明度，跟前面提到的rgba一樣，可以用0.幾，%，來表示

div{
    background-color:rgb(0,154,255);
    color: #ff00a6;
    opacity: 0;
}
.div1{
    background-color: rgb(200,0,150);
    color:#bbffbb;
    opacity:50%;
}
.div2{
    background-color: rgb(0, 255, 0);
    color:#c1d2FF;
    opacity: 0.7;
}

可以看到div0因為opacity: 0完全透明看不到了，但是這跟display:none是不一樣的，div0現在只是看不到但他還在那裏，display:none則會把div0本身的空間清除

<div style="display: none;">
        div0
</div>

給上display:none後面的物件會往前補